import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { useState } from 'react';
import { router } from 'expo-router';

export default function Login() {
    const [users, setUsers] = useState({
        username: '',
        password: ''
    })
    const onLogin = () => {
        console.log(users)
        // 跳转到首页
        router.navigate('/(tabs)/')

    }
    // 数据绑定
    const Username = (text: string) => {
        setUsers({
            ...users,
            username: text
        })
    }
    const Password = (text: string) => {
        setUsers({
            ...users,
            password: text
        })
    }
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Login</Text>
            <TextInput style={styles.input} placeholder="Username" value={users.username} onChangeText={Username} />
            <TextInput style={styles.input} placeholder="Password" value={users.password} onChangeText={Password} secureTextEntry={true} />
            <Button title="登录" onPress={() => onLogin()} />
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontSize: 26,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    input: {
        width: '80%',
        height: 40,
        borderWidth: 1,
        borderColor: '#ccc',
        marginBottom: 20,
        paddingHorizontal: 10,

    }
})
